<template>
    <div>
      <LuffyHeader/>
      <el-carousel indicator-position="outside" height="689.25px">
        <el-carousel-item v-for="item in lunboImgs" :key="item.id">
          <img :src="item.image" alt="">
        </el-carousel-item>
      </el-carousel>
      <LuffyFoot/>
    </div>

</template>

<script>
  import LuffyHeader from '../common/LuffyHeader'
  import LuffyFoot from '../common/LuffyFoot'
export default {
    name:'Home',
      data() {
    return {
    	lunboImgs:[]
    };
  },
  created:function(){
    this.$axios.get(this.$settings.Host+'/banner/')
      .then(res=>{
        console.log(res.data);
        this.lunboImgs = res.data;
      })
      .catch(err=>{
        console.log(err)
      })
  },
  components:{LuffyHeader,LuffyFoot}
}

</script>

<style scoped>
  img{
    width: 100%;
  }

</style>
